<template>
	<view class="signature-box">
		<!-- 签名 -->
		<view class="signature" v-show="isShowCanvas">
      <div class="canvas-view">
        <div class="canvas-layer">
          <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
            @touchend="touchend"></canvas>
        </div>
      </div>
			<view class="footer">
				<u-button @click="finish" type="primary" size="medium">保存</u-button>
				<u-button @click="clear" type="default" size="medium">清除</u-button>
				<u-button v-if="isShowClose" @click="close" type="default" size="medium">关闭</u-button>
			</view>
		</view>
		<!-- 签完名后生成的图片 -->
		<view v-show="signatureImg" class="signature-img">
      <div class="image-view">
        <image :src="signatureImg" mode=""></image>
      </div>
		</view>
		<!-- 清除签完名后生成的图片 -->
		<view v-if="isShowClear" class="image-btns">
      <u-button v-show="signatureImg" @click="obliterate" type="error" :plain="true" :ripple="true"
        ripple-bg-color="#909399" size="medium">清除签名</u-button>
		</view>
	</view>
</template>

<script>
import { pathToBase64 } from './jssdk_image_tools.js'
var x = 20;
var y = 20;
export default {
  data() {
    return {
      //绘图图像
      ctx: '',
      //路径点集合
      points: [],
      // 签名图片
      signatureImg: '',
      hasSign: false
    }
  },
  props: {
    isShowCanvas: {
      default: true
    },
    isShowClose: {
      default: false
    },
    isShowClear: {
      default: false
    },
    // 签名图片
    signatureImage: {
      default: ''
    }
  },

  watch: {
    signatureImage: {
      handler () {
        this.syncSignatureImg()
      }
    }
  },

  methods: {
    // 同步签名图片
    syncSignatureImg () {
      this.signatureImg = this.signatureImage
    },
    // 清除签名的图片
    obliterate() {
      if (this.signatureImg) {
        this.signatureImg = '';
      }
      this.close();
    },
    // 关闭并清空画布
    close() {
      this.$emit('closeCanvas');
      this.clear();
    },
    // 创建并显示画布
    createCanvas() {
      this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
      this.ctx.setFillStyle('#000000')
      this.ctx.fillStyle = '#000000'
      // 设置画笔样式
      this.ctx.lineWidth = 4;
      this.ctx.lineCap = 'round';
      this.ctx.lineJoin = 'round';
    },
    // 触摸开始，获取到起点
    touchstart(e) {
      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = {
        X: startX,
        Y: startY
      };
      this.points.push(startPoint);
      // 每次触摸开始，开启新的路径
      this.ctx.beginPath();
    },
    // 触摸移动，获取到路径点
    touchmove(e) {
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = {
        X: moveX,
        Y: moveY
      };
      this.points.push(movePoint); //存点
      let len = this.points.length;
      if (len >= 2) {
        this.draw(); //绘制路径
      }
    },
    // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
    touchend() {
      this.points = [];
    },
    // 绘制笔迹
    draw() {
      let point1 = this.points[0];
      let point2 = this.points[1];
      this.points.shift();
      this.ctx.moveTo(point1.X, point1.Y);
      this.ctx.lineTo(point2.X, point2.Y);
      this.ctx.stroke();
      this.ctx.draw(true);
      this.hasSign = true
    },
    // 清空画布
    clear() {
      this.hasSign = false
      let that = this;
      uni.getSystemInfo({
        success: function(res) {
          let canvasw = res.windowWidth
          let canvash = res.windowHeight
          that.ctx.clearRect(0, 0, canvasw, canvash)
          that.ctx.draw(true)
        }
      })
    },
    // 完成绘画并保存到本地
    finish() {
      if (!this.hasSign) {
        uni.showToast({
          title: '签名为空不能保存',
          icon: 'none',
          duration: 2000
        })
        return
      }
      let that = this;
      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: (res) => {
          if (!res || !res.tempFilePath) {
            that.signatureImg = res.tempFilePath
            that.$emit('confirmCanvas', that.signatureImg)
            that.close()
          } else {
            //用来解决安卓真机获取到的是canvas图片的临时路径，转成base64格式
            pathToBase64(res.tempFilePath).then(re => {
              that.signatureImg = re
              that.$emit('confirmCanvas', that.signatureImg)
              that.close()
            })
          }
        }
      })
    }
  },
  mounted() {
    this.createCanvas()
    this.syncSignatureImg()
  }
}
</script>

<style lang="less" scoped>
.signature-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100% - 10rpx);
  background: #fff;
  // 签名模块
  .signature {
    width: 100%;
  }
  .canvas-view {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
  .canvas-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
  // canvas
  .mycanvas {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  //底部按钮
  .footer {
    font-size: 14px;
    height: 150upx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #a7a7a733;
    border-bottom: 1px solid #a7a7a733;
  }
  // 生成的图片
  .signature-img {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    .image-view {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
  .image-btns {
    padding-top: 8px;
  }
}
</style>
